<template>
    <div class="multi-picture">
        <div
            class="multi-upload-list"
            :style="{height: height + 'px', width: width + 'px',lineHeight: height + 'px'}"
            v-for="(item, index) in uploadList"
            :key="index"
        >
            <img :src="absUrl(item)" />
            <div class="multi-upload-list-cover">
                <Icon
                    type="ios-eye-outline"
                    @click.native="handleView(item)"
                ></Icon>
                <Icon
                    type="ios-trash-outline"
                    @click.native="handleRemove(item)"
                ></Icon>
            </div>
        </div>
        <Upload
            ref="upload"
            :show-upload-list="false"
            :on-success="handleSuccess"
            :format="['jpg', 'jpeg', 'png', 'gif']"
            :max-size="5120"
            type="drag"
            :action="uploadUrl"
            :data="requestData"
            style="display: inline-block;"
            :style="{width: (width + 2) + 'px'}"
            :before-upload="handleBeforeUpload"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            multiple
        >
            <div :style="{width: width + 'px',height:height + 'px',lineHeight: height + 'px'}">
                <Icon type="ios-cloud-upload-outline" size="20"></Icon>
            </div>
        </Upload>
        <div class="progress-list">
            <div v-for="(item, index) in fileList" :key="index">
                <Progress
                    v-if="item.showProgress"
                    :percent="item.percentage"
                    hide-info
                ></Progress>
            </div>
        </div>
        <Modal
            title="View Image"
            :z-index="9999"
            :transfer="false"
            v-model="visible"
        >
            <img :src="imageUrl" v-if="visible" style="width: 100%" />
        </Modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "../lib/util";
import appconst from "../lib/appconst";
import AbpBase from "../lib/abpbase";
import Ajax from "../lib/ajax";

interface IRequestParams {
    pictureType: string;
}

interface UploadImage {
    imageUrl: string;
    linkUrl: string;
    alt: string;
    displayOrder: number;
}

@Component({
    components: {},
})
export default class MultiPicture extends AbpBase {
    @Prop({
        type: Array,
        default: () => {
            return [];
        },
    })
    value: Array<any>;

    @Prop({ type: Object }) requestData: IRequestParams;

    @Prop({ type: Object }) extendData: any;

    @Prop({
        type: Number,
        default: 120,
    })
    width: number;

    @Prop({
        type: Number,
        default: 90,
    })
    height: number;

    uploadList: Array<any> = new Array<any>();

    fileList: Array<any> = new Array<any>();

    visible: boolean = false;

    uploadUrl: string =
        appconst.remoteServiceBaseUrl + "/Picture/UploadPicture";

    imageUrl = "";

    absUrl(url) {
        return appconst.remoteServiceBaseUrl + url;
    }

    handleView(url) {
        this.imageUrl = appconst.remoteServiceBaseUrl + url;
        this.visible = true;
    }
    handleRemove(url) {
        // TODO: 删除图片
        let deleteUrl =
            appconst.remoteServiceBaseUrl +
            "/Picture/DeletePicture?PictureUrl=" +
            url;
        Ajax.get(deleteUrl)
            .then(() => {
                const fileList = this.uploadList;
                fileList.splice(fileList.indexOf(url), 1);
                this.$emit("input", this.uploadList);
                if (url) {
                    this.$emit("on-delete-success", url);
                }
            })
            .catch(() => {
                this.$Message.error("删除图片失败");
            });
    }
    handleSuccess(res, file) {
        this.uploadList.push(res.result.url);
        this.$emit("on-upload-success", res.result.url);
        this.$emit("input", this.uploadList);
    }
    handleFormatError(file) {
        this.$Notice.warning({
            title: "提示信息",
            desc: "只能上传以下类型的图片('jpg','jpeg','png','gif')",
        });
    }
    handleMaxSize(file) {
        this.$Notice.warning({
            title: "提示信息",
            desc: "上传图片最大不能超过5M",
        });
    }
    clearFiles() {
        (this.$refs.upload as any).clearFiles();
    }
    handleBeforeUpload() {
        // const check = (this.fileList.length + this.uploadList.length) < 6;
        // if (!check) {
        //     this.$Notice.warning({
        //         title: '最多只能上传6张图片'
        //     });
        //     return false;
        // }

        if (!!window.abp.auth.getToken()) {
            (this.$refs.upload as any).headers["Authorization"] =
                "Bearer " + window.abp.auth.getToken();
        }
        (this.$refs.upload as any).headers[".AspNetCore.Culture"] =
            window.abp.utils.getCookieValue("Abp.Localization.CultureName");
        (this.$refs.upload as any).headers["Abp.TenantId"] =
            window.abp.multiTenancy.getTenantIdCookie();
    }
    mounted() {
        this.fileList = (this.$refs.upload as any).fileList;
    }
    created() {}
    @Watch("value")
    onValueChange(val: any, oldVal: any) {
        if (val[0]) {
            this.uploadList = val;
        } else {
            this.uploadList = [];
        }
    }
}
</script>

<style  scoped>
.multi-picture {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.multi-upload-list {
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
}
.multi-upload-list img {
    width: 100%;
    height: 100%;
}
.multi-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
}
.multi-upload-list:hover .multi-upload-list-cover {
    display: block;
}
.multi-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
.progress-list {
    display: block;
}
</style>